<template>

	<view class="topic-ul">
		<text class="topic-li" v-for="(item,index) in data">
			{{item}}
		</text>
	</view>

</template>

<script setup>
	import {
		defineProps
	} from 'vue';

	defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
</script>
<style scoped>
	.topic-ul {
		display: flex;
	}

	.topic-li {
		display: inline-block;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #b3dfff;
		height: $topicHeight;
		line-height: $topicHeight;
		color: #4c4c4c;
		font-size: 24rpx;
	}

	.topic {
		display: inline-block;
		padding: 4rpx 8rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		background-color: #b3dfff;
		height: $topicHeight;
		line-height: $topicHeight;
		color: #4c4c4c;
		font-size: 24rpx;
	}
</style>